<!-- @format -->

<script setup lang="ts">
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import TheShareButton from '../../components/TheShareButton.vue'
import { useNavHome } from '../../composables/useNavHome'
import { useShare } from '../../composables/useShare'

const { handleBack, handleBackHome } = useNavHome()

const loading = ref(true)
const options = ref<any>({})
const shareTitle = ref('')
const nodes = ref([])
const bgData = ref({})
const answers = ref<any>({})
// const toast = useToast()

const loadShareData = async () => {
  shareTitle.value = options.value?.title || ''
  if (options.value?.id) {
    let id = options.value?.id
    let oid = options.value?.oid
    const { content, getData } = useShare(id, { share: true, oid })
    await getData()

    if (content.value) {
      if (content.value.nodes) {
        nodes.value = content.value.nodes
      }
      // 应用背景
      const { color, url, purl } = content.value.bgData
      if (color) {
        bgData.value = { color }
      } else if (purl) {
        bgData.value = { url: purl }
      } else if (url) {
        bgData.value = { url }
      }

      // 答案
      if (content.value.answers) {
        answers.value = content.value.answers
      }
    }
  }
  loading.value = false
}

const hasAnswer = computed(() => {
  return !!answers.value?.content
})

// 制作同款
const toMake = () => {
  let id = options.value?.id
  let oid = options.value?.oid
  uni.navigateTo({
    url: `/pages/minishare/minishare?id=${id}&oid=${oid}&title=${shareTitle.value}`,
  })
}

// 复制内容
const toCopy = () => {
  uni.setClipboardData({
    showToast: false,
    data: answers.value?.content || '',
    success: () => {
      // toast.show('复制成功')
    },
  })
}

onLoad((option) => {
  options.value = option
  loadShareData()
})

onShareAppMessage(() => {
  let id = options.value?.id
  let oid = options.value?.oid
  return {
    title: shareTitle.value || '爱分享',
    path: `/pages/minishare/shareNext?id=${id}&oid=${oid}&title=${shareTitle.value}`,
  }
})
</script>

<template>
  <div>
    <wd-navbar fixed placeholder safeAreaInsetTop>
      <template #left>
        <view class="nav-left">
          <wd-navbar-capsule @back="handleBack" @back-home="handleBackHome" />
        </view>
      </template>
    </wd-navbar>

    <share-view
      disabled
      :loading="loading"
      :bgData="bgData"
      :nodes="nodes"
    ></share-view>

    <div v-if="hasAnswer" class="answer-x" :class="{ active: !loading }">
      <div class="tip">{{ answers?.title || '' }}</div>
      <div class="content" @click="toCopy">
        <div class="content-inner">{{ answers?.content || '' }}</div>
      </div>
      <div class="tip tip-info">单击可复制</div>
    </div>
    <div class="func">
      <TheShareButton style="flex: 1">分享</TheShareButton>
      <wd-button @click="toMake">制作同款</wd-button>
    </div>
    <!-- <wd-toast></wd-toast> -->
  </div>
</template>
<style lang="scss" scoped>
.nav-left {
  display: flex;
  align-items: center;
}

.answer-x {
  opacity: 0;
  transition: opacity 0.3s;
  padding: 20rpx;
}
.answer-x.active {
  opacity: 1;
}
.tip {
  font-size: 28rpx;
  color: #999;
  margin: 20rpx 0;
}
.tip-info {
  font-size: 24rpx;
  text-align: center;
}
.content {
  font-size: 32rpx;
  padding: 20rpx;
  font-weight: 500;
  text-align: center;
  background-color: rgba($color: green, $alpha: 0.1);
}
.content-inner {
  display: inline-block;
  text-align: left;
}

.func {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16rpx 20rpx;
  padding-bottom: 80rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}
</style>
